/**
 * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
 */
@use 'sass:math';
@use './color.scss' as *;
@use 'sass:map';

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-size: 14px;
  position: relative;
}
::-webkit-scrollbar {
  width: 0;
  height: 20px;
}

.el-pagination.is-background {
  .el-pager li:not(.is-disabled) {
    border: 1px solid $og-sub-border-color !important;
    &.is-active {
      color: $og-sub-primary-color !important;
      border-color: $og-sub-primary-color !important;
    }
    &:hover {
      border-color: $og-sub-primary-color !important;
    }
  }
  &.el-pagination--small .el-pager li {
    min-width: 32px !important;
  }
}
.el-overlay,
.el-message,
.el-popper {
  z-index: 10000000 !important;
}

.el-dialog {
  .el-dialog__header {
    border-bottom: 1px solid $og-sub-border-color !important;
    margin-right: 0px !important;
    padding-top: 10px !important;
    font-size: 14px !important;
  }
  .el-dialog__title {
    font-size: 14px !important;
  }
  .el-dialog__headerbtn {
    top: -2px !important;
  }
  .el-dialog__footer {
    border-top: 1px solid $og-sub-border-color !important;
    padding-bottom: 10px !important;
  }
}
.el-menu-item.is-active {
  background-color: var(--el-bg-color-og-hover) !important;
  border-right: 2px solid $og-primary-color !important;
  color: var(--el-text-og-regular);
}
.el-menu--collapse .el-sub-menu__title {
  span,
  .el-sub-menu__icon-arrow {
    display: none !important;
  }
}
.el-popper:focus {
  outline: none !important;
}
#app {
  height: 100%;
  --vem-header-height: 30px;
  --og-sub-text-color: #{$og-sub-text-color};
  color: var(--el-text-color-regular);
}
:root {
  --el-bg-color-overlay: $og-background-color;
  --el-color-primary: $og-primary-color;
  --el-text-color-primary: var(--el-text-color-og);
  @for $i from 1 through 9 {
    --el-color-primary-light-#{$i}: #{mix(#fff, #732fcb, math.percentage(math.div($i, 10)))};
  }
}
.el-picker-panel .el-button {
  background-color: var(--el-bg-color-sub) !important;
  border-color: var(--el-border-color) !important;
  color: var(--button-1-color) !important;
}
.el-button {
  height: auto !important;
  &:active {
    background-color: $og-button-active-color !important;
    border-color: $og-button-active-color !important;
  }
  &.is-text:not(.is-disabled).is-has-bg {
    background-color: transparent !important;
    padding: 0 !important;
  }
}
.el-picker-panel__link-btn {
  color: var(--el-button-text-color) !important;
}
.el-button.is-text {
  color: var(--el-button-text-color) !important;
}
.el-tabs__header {
  background-color: var(--el-bg-color-sub-white) !important;
  margin-bottom: 6px !important;
}
.tab2 .el-tabs__header {
  margin-bottom: 12px !important;
}
.el-tabs__item {
  padding: 0 16px !important;
  font-size: 14px !important;
  color: var(--el-text-color-og) !important;
}
.el-tabs__active-bar {
  background-color: var(--primary-6) !important;
  height: 3px !important;
}
.is-active {
  color: var(--primary-6) !important;
}
.el-input__inner {
  color: var(--el-text-color-og) !important;
}
.left-align .el-input__inner {
  text-align: left !important;
}
.el-progress {
  &-bar__inner {
    background-color: $og-sub-primary-color !important;
  }
}
.el-range-editor.is-disabled {
  border-color: $og-border-color !important;
  background-color: var(--el-bg-color-disabled) !important;
}
.el-range-editor.is-disabled input {
  background-color: var(--el-bg-color-disabled) !important;
}
.el-input.is-disabled .el-input__wrapper {
  background-color: var(--el-bg-color-disabled) !important;
}
// 弹窗loading
.el-loading-spinner .el-loading-text {
  color: $og-sub-primary-color !important;
}
.el-loading-spinner .path {
  stroke: $og-sub-primary-color !important;
}
.el-button--small {
  background-color: var(--el-button-color-small) !important;
  border: none !important;
  color: var(--el-text-color-og);
}
.sql-popover-tip {
  max-width: 300px !important;
  color: var(--el-text-color-og) !important;
}
.el-picker-panel__icon-btn .el-icon {
  color: var(--el-text-color-og);
}
.in-active-path .el-cascader-node__label {
  color: var(--el-color-tabbar-active) !important;
}
.el-cascader .el-input.is-focus {
  border: none !important;
}
.el-cascader .el-input.is-focus .el-input__wrapper {
  border: none !important;
  box-shadow: 0 0 0 1px var(--hw-primary-1, var(--hw-primary-1)) inset !important;
}

.el-select-dropdown__item.selected {
  color: var(--el-color-tabbar-active) !important;
}
.el-cascader-panel .in-active-path .el-icon svg {
  color: var(--hw-primary-1);
}

// textarea
.el-textarea__inner {
  background-color: var(--color-fill-2) !important;
}
.el-textarea.is-disabled .el-textarea__inner {
  background-color: var(--el-bg-color-disabled) !important;
}
.el-textarea__inner:focus {
  background-color: var(--main-background-color) !important;
}

.el-table .cell {
  color: var(--color-1) !important;
}
.el-input__wrapper {
  height: 24px;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-left: 8px !important;
}
.el-cascader .el-input__wrapper {
  height: unset;
}
.el-form-item__label {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.el-input__wrapper.is-active {
  background-color: var(--main-background-color) !important;
}
.el-input__wrapper.is-active .el-range-input {
  background-color: var(--main-background-color) !important;
}

// pagination
.el-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 62px !important;
  padding: 0px !important;
  .el-pagination__sizes {
    .el-input {
      height: 32px !important;
    }
  }
}
.el-pagination.is-background .el-pager li:not(.is-disabled) {
  border: 0 !important;
  background-color: rgb(255, 255, 255, 0);
}
.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
  color: var(--primary-6) !important;
  background-color: var(--color-primary-light-1) !important;
}
.btn-prev {
  background-color: rgb(255, 255, 255, 0) !important;
}
.btn-next {
  background-color: rgb(255, 255, 255, 0) !important;
}

// el-link
.el-link {
  font-size: 12px !important;
}
// table
.table-wrapper-table-id {
  color: var(--primary-6) !important;
  cursor: pointer;
}

// check-box
.el-checkbox__inner::after {
  border-color: var(--color-bg-2) !important;
}

// button for message box
.el-message-box__btns .el-button.el-button--primary {
  color: var(--color-bg-2) !important;
  background-color: var(--primary-6) !important;
}
.el-message-box__btns .el-button.el-button--primary.search-button {
  color: var(--primary-6) !important;
  background-color: rgb(255, 255, 255, 0) !important;
  border: 1px solid var(--primary-6) !important;
}

// Element Button Reset
.el-button {
  font-size: 14px !important;
  padding: 8px 16px !important;
  border: 1px solid var(--button-1-border) !important;
  border-radius: 2px;
  font-weight: 400 !important;
  color: var(--button-1-color) !important;
  background-color: var(--button-1-background) !important;
}
.el-button.el-button--primary {
  color: var(--color-bg-2) !important;
  background-color: var(--primary-6) !important;
}
.el-button.el-button--primary.search-button {
  color: var(--primary-6) !important;
  background-color: rgb(255, 255, 255, 0) !important;
  border: 1px solid var(--primary-6) !important;
}

// option
.option-wrap {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.el-radio-group {
  height: 32px;
}
